<template>
  <view>
    <view
      class="item"
      v-for="(item, index) in list"
      :key="index"
      @click="toDetail(item)"
    >
      <view class="flex text-sm align-center padding-bottom-sm">
        <view class="flex">
          <text
            class="inline-block rounded-[6rpx] text-22 text-h5 border-[1px] border-border border-solid p-[2rpx]"
            >{{ getMarketName(item.marketCode) }}</text
          >
          <view class="text-36 font-bold text-h2">{{ item.title }}</view>
          <view class="text-24 text-h3">
            {{ item.code }}
          </view>
        </view>
        <view class="col-4 text-center">
          <view>{{ item.cityValue }}</view>
          <view class="margin-top-xs">{{ item.number }}</view>
        </view>
        <view class="col-4 text-center">
          <view>{{ item.buyprice }}</view>
          <view class="margin-top-xs">{{
            i == 0 ? item.cai_buy : item.sellprice
          }}</view>
        </view>
        <view
          class="col-4 text-right"
          :class="item.profitLose > 0 ? 'text-red' : 'text-green'"
        >
          <view>{{ item.profitLose }}</view>
          <view class="margin-top-xs">{{ item.profitLose_rate }}</view>
        </view>
      </view>
      <view class="flex padding-top-sm border-top align-center">
        <view class="flex-sub text-gray text-sm"
          >{{ i == 0 ? item.createtime_name : item.outtime_name }}
        </view>
        <tui-button
          v-if="i == 0"
          @click="showSell"
          :index="index"
          type="theme"
          shape="circle"
          :size="28"
          width="100rpx"
          height="60rpx"
          >卖出</tui-button
        >
      </view>
    </view>
    <empty v-if="list && list.length == 0"></empty>
    <tui-modal
      :show="showModal"
      @click="sellClick"
      @cancel="showModal = false"
      title="提示"
      content="确定认卖出？"
      :size="32"
      :button="buttons"
    ></tui-modal>
  </view>
</template>

<script setup>
  import { getMarketName } from '@/utils/stock';
  import { tradeSell } from '@/api/index.js';
  import { ref, nextTick } from 'vue';
  import tui from '@/common/httpRequest.js';

  defineOptions({
    name: 'RTList',
  });
  const emit = defineEmits(['downCallback']);
  const showModal = ref(false);
  const currentItem = ref(null);

  const props = defineProps({
    list: {
      type: Array,
      default: () => [],
    },
  });

  const closeModel = () => {
    showModal.value = false;
    currentItem.value = null;
  };
  const sellClick = (e) => {
    if (e.index == 1) {
      tradeSell({
        allcode: currentItem.value.allcode,
        id: currentItem.value.id,
        waystatus: 1,
      }).then((res) => {
        tui.modal(null, res.msg, false, (e) => {
          closeModel();
          emit('downCallback');
        });
      });
    } else {
      closeModel();
    }
  };

  const showSell = (e) => {
    currentItem.value = this.list[e.index];
    nextTick(() => {
      showModal.value = true;
    });
  };

  const toDetail = (item) => {
    uni.navigateTo({
      url: '/pages/shares/holdDetail?data=' + JSON.stringify(item),
    });
  };
</script>

<style lang="scss" scoped>
  .head {
    padding: 20rpx;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 99;

    view {
      width: 25%;
      font-size: 24rpx;
      color: #999;
    }
  }

  .sign {
    width: 36rpx;
    height: 36rpx;
    margin-right: 6rpx;
  }

  .item {
    background: #fff;
    padding: 20rpx;
    border-bottom: 4px solid #f7f7f7;
  }
</style>
